"slider"
Bootstrap 3.0.0 Snippet by Pawan Pandey

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/seanfree/pen/LxPBZy?limit=all&page=7&q=partial" /> <link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">* { box-sizing: border-box; } body { background-color: #0c0c0c; overflow: hidden; } #container { position: absolute; width: 100%; height: 100%; overflow: hidden; } #slides { position: relative; width: 100%; height: 100%; } #slides .slide { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } #slides .slide .title { position: absolute; top: calc(50% - 0.5em); left: 20px; z-index: 2; padding-top: 5px; font-family: "Reem Kufi", sans-serif; font-size: 5em; color: white; overflow: hidden; } #slides .slide .title .title-text { display: block; -webkit-transform: translateY(1.2em); transform: translateY(1.2em); -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; } #slides .slide .slide-partial { position: absolute; width: 50%; height: 100%; overflow: hidden; -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; } #slides .slide .slide-partial img { position: absolute; z-index: 1; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; } #slides .slide .slide-left { top: 0; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } #slides .slide .slide-left img { top: 0; right: 0; -o-object-position: 100% 50%; object-position: 100% 50%; -webkit-transform: translateX(50%); transform: translateX(50%); } #slides .slide .slide-right { top: 0; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } #slides .slide .slide-right img { top: 0; left: 0; -o-object-position: 0% 50%; object-position: 0% 50%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #slides .slide.active .title .title-text { -webkit-transform: translate(0); transform: translate(0); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } #slides .slide.active .slide-partial, #slides .slide.active .slide-partial img { -webkit-transform: translateX(0); transform: translateX(0); } #slide-select { position: absolute; bottom: 20px; left: 20px; z-index: 100; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; font-family: "Reem Kufi", sans-serif; font-size: 1.5em; font-weight: lighter; color: white; } #slide-select li { position: relative; cursor: pointer; margin: 0 5px; } #slide-select li.prev:hover { -webkit-transform: translateX(-2px); transform: translateX(-2px); } #slide-select li.next:hover { -webkit-transform: translateX(2px); transform: translateX(2px); } #slide-select .selector { height: 14px; width: 14px; border: 2px solid white; background-color: transparent; -webkit-transition: background-color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out; } #slide-select .selector.current { background-color: white; } .codepen-link { position: absolute; bottom: 20px; right: 20px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; box-sizing: border-box; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg"); background-position: center center; background-size: cover; opacity: 0.5; -webkit-transition: all 0.25s; transition: all 0.25s; } .codepen-link:hover { opacity: 0.8; box-shadow: 0 2px 6px #0c0c0c; } </style></head><body> <div id="container"> <ul id="slides"> <li class="slide"> <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-left.jpg"/></div> <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-right.jpg"/></div> <h1 class="title"><span class="title-text">Forest</span></h1> </li> <li class="slide"> <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-left.jpg"/></div> <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-right.jpg"/></div> <h1 class="title"><span class="title-text">Mountain</span></h1> </li> <li class="slide"> <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-left.jpg"/></div> <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-right.jpg"/></div> <h1 class="title"><span class="title-text">Ocean</span></h1> </li> <li class="slide"> <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-left.jpg"/></div> <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-right.jpg"/></div> <h1 class="title"><span class="title-text">Canyon</span></h1> </li> <li class="slide"> <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-left.jpg"/></div> <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-right.jpg"/></div> <h1 class="title"><span class="title-text">Lake</span></h1> </li> </ul> <ul id="slide-select"> <li class="btn prev"><</li> <li class="selector"></li> <li class="selector"></li> <li class="selector"></li> <li class="selector"></li> <li class="selector"></li> <li class="btn next">></li> </ul> </div><a class="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >"use strict"; var $slides = undefined, interval = undefined, $selectors = undefined, $btns = undefined, currentIndex = undefined, nextIndex = undefined; var cycle = function cycle(index) { var $currentSlide = undefined, $nextSlide = undefined, $currentSelector = undefined, $nextSelector = undefined; nextIndex = index !== undefined ? index : nextIndex; $currentSlide = $($slides.get(currentIndex)); $currentSelector = $($selectors.get(currentIndex)); $nextSlide = $($slides.get(nextIndex)); $nextSelector = $($selectors.get(nextIndex)); $currentSlide.removeClass("active").css("z-index", "0"); $nextSlide.addClass("active").css("z-index", "1"); $currentSelector.removeClass("current"); $nextSelector.addClass("current"); currentIndex = index !== undefined ? nextIndex : currentIndex < $slides.length - 1 ? currentIndex + 1 : 0; nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0; }; $(function () { currentIndex = 0; nextIndex = 1; $slides = $(".slide"); $selectors = $(".selector"); $btns = $(".btn"); $slides.first().addClass("active"); $selectors.first().addClass("current"); interval = window.setInterval(cycle, 6000); $selectors.on("click", function (e) { var target = $selectors.index(e.target); if (target !== currentIndex) { window.clearInterval(interval); cycle(target); interval = window.setInterval(cycle, 6000); } }); $btns.on("click", function (e) { window.clearInterval(interval); if ($(e.target).hasClass("prev")) { var target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1; cycle(target); } else if ($(e.target).hasClass("next")) { cycle(); } interval = window.setInterval(cycle, 6000); }); }); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: